<template>
    <div style="margin-top: 1vw" class="mycard">
    <span class="words">查询出下列歌曲<i class="el-icon-arrow-right"></i></span>
    <el-table :data="songList.filter(data => !search || data.sname.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%; margin-top: 1vw">
        <el-table-column label="专辑号" prop="aid">
            </el-table-column>
            <el-table-column label="歌曲名" prop="sname">
            </el-table-column>
            <el-table-column label="是否新歌" prop="is_new">
            </el-table-column>
            <el-table-column label="是否收藏" prop="is_hot">
            </el-table-column>
        <el-table-column align="right">
            <template slot="header" slot-scope="scope">
                <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
            </template>
            <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" v-if="!scope.row.is_hot"><i
                        class="el-icon-star-off"></i></el-button>
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" v-else><img
                        src="@/assets/weblogo.jpg" style="width:20%" /></el-button>
                <!-- <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">Delete</el-button> -->
            </template>
        </el-table-column>
    </el-table>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            songList: [],
            search: ''
        }
    },
    watch: {
        '$route'(to, from) {

            this.getAllSong();

        }
    },
    created() {
        this.getAllSong();
    },
    methods: {
        async handleEdit(index, row) {
            // row.isselect = !row.isselect;
            console.log(row);
            if(row.is_hot == 1) {row.is_hot = 0}
            else {row.is_hot = 1}
            let param = new URLSearchParams()
            param.append('user_id', window.sessionStorage.getItem("userid"))
            param.append('songid', row.sid)
            const res = await this.$http.post('music/insertMsrListBean', param);
            console.log(res);
        },
        async getAllSong() {
            // console.log(!this.$route.query.songname);
            if(!this.$route.query.songname) {
                const res = await this.$http.get('music/findAllSongBean');
                this.songList = res.data.data;
                this.$message.success(res.data.msg);
                console.log(res);
            }else{
                const res = await this.$http.get('music/findSong', { params: { sname: this.$route.query.songname } });
                this.songList = res.data.data;
                this.$message.success(res.data.msg);
            }
            // const res = await this.$http.get('music/findAllSongBean');
            // this.songList = res.data.data;
        }
    },
}
</script>
<style scoped>

.mycard {
    padding-top: 20px;
    padding-bottom: 10px;
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.2);
  }
  .words {
    font-size:2rem;
    padding-left: 20px;
    color: #ffffff;
    text-shadow: -3px -2px 3px #dbdada, 4px 3px 3px #444444;
  }
</style>